<template>
  <div class="dashboard-container">
    <div class="welcome-section">
      <div class="welcome-header">
        <h1>欢迎使用智慧农业管理系统</h1>
        <p class="current-date">{{ currentDate }}</p>
      </div>
      <div class="welcome-message">
        <el-alert
          title="系统公告"
          type="success"
          :closable="false"
          description="欢迎登录智慧农业管理系统，您可以在这里管理农场、地块、作物和设备等资源。如有任何问题，请联系系统管理员。"
        >
        </el-alert>
      </div>
    </div>

    <el-row :gutter="20" class="data-overview">
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <template #header>
            <div class="card-header">
              <el-icon><User /></el-icon>
              <span>用户总数</span>
            </div>
          </template>
          <div class="card-content">
            <div class="data-value">{{ stats.userCount }}</div>
            <div class="data-trend">
              <span>较上月</span>
              <el-tag size="small" type="success">+{{ stats.userGrowth }}%</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <template #header>
            <div class="card-header">
              <el-icon><Location /></el-icon>
              <span>农场总数</span>
            </div>
          </template>
          <div class="card-content">
            <div class="data-value">{{ stats.fieldCount }}</div>
            <div class="data-trend">
              <span>较上月</span>
              <el-tag size="small" type="success">+{{ stats.fieldGrowth }}%</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <template #header>
            <div class="card-header">
              <el-icon><Document /></el-icon>
              <span>租赁总数</span>
            </div>
          </template>
          <div class="card-content">
            <div class="data-value">{{ stats.rentalCount }}</div>
            <div class="data-trend">
              <span>较上月</span>
              <el-tag size="small" type="success">+{{ stats.rentalGrowth }}%</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <template #header>
            <div class="card-header">
              <el-icon><Goods /></el-icon>
              <span>收获总量</span>
            </div>
          </template>
          <div class="card-content">
            <div class="data-value">{{ stats.harvestCount }}<span class="unit">kg</span></div>
            <div class="data-trend">
              <span>较上月</span>
              <el-tag size="small" type="success">+{{ stats.harvestGrowth }}%</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="charts-section">
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span>近期订单统计</span>
            </div>
          </template>
          <div class="chart-placeholder">
            <div class="chart-info">
              <div class="chart-data">
                <div class="data-item">
                  <div class="data-label">本月订单</div>
                  <div class="data-number">{{ stats.orderThisMonth }}</div>
                </div>
                <div class="data-item">
                  <div class="data-label">上月订单</div>
                  <div class="data-number">{{ stats.orderLastMonth }}</div>
                </div>
                <div class="data-item">
                  <div class="data-label">同比增长</div>
                  <div class="data-number">{{ stats.orderGrowth }}%</div>
                </div>
              </div>
              <div class="chart-image">
                <!-- 这里可以放图表组件 -->
                <div class="mock-chart"></div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span>传感器数据概览</span>
            </div>
          </template>
          <div class="chart-placeholder">
            <div class="sensor-data">
              <div class="sensor-item" v-for="(sensor, index) in sensors" :key="index">
                <div class="sensor-name">{{ sensor.name }}</div>
                <el-progress 
                  :percentage="sensor.value" 
                  :color="sensor.color"
                  :format="format"
                  :stroke-width="15"
                />
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>


  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { User, Location, Document, Goods } from '@element-plus/icons-vue'

// 当前日期
const currentDate = computed(() => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  const weekday = weekdays[now.getDay()]
  return `${year}年${month}月${day}日 ${weekday}`
})

// 模拟统计数据
const stats = ref({
  userCount: 156,
  userGrowth: 12.5,
  fieldCount: 28,
  fieldGrowth: 8.3,
  rentalCount: 342,
  rentalGrowth: 15.7,
  harvestCount: 5280,
  harvestGrowth: 22.4,
  orderThisMonth: 186,
  orderLastMonth: 152,
  orderGrowth: 22.4
})

// 模拟传感器数据
const sensors = ref([
  { name: '土壤湿度', value: 68, color: '#67C23A', unit: '%' },
  { name: '空气温度', value: 25, color: '#E6A23C', unit: '°C' },
  { name: '光照强度', value: 82, color: '#F56C6C', unit: '%' },
  { name: '空气湿度', value: 45, color: '#409EFF', unit: '%' }
])

// 格式化进度条显示
const format = (percentage) => {
  const sensor = sensors.value.find(s => s.value === percentage)
  return sensor ? `${percentage}${sensor.unit}` : `${percentage}%`
}


</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f5f7fa;

  .welcome-section {
    margin-bottom: 20px;

    .welcome-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;

      h1 {
        font-size: 24px;
        color: #303133;
        margin: 0;
      }

      .current-date {
        font-size: 14px;
        color: #606266;
      }
    }
  }

  .data-overview {
    margin-bottom: 20px;

    .data-card {
      height: 140px;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      .card-header {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: bold;

        .el-icon {
          margin-right: 8px;
          font-size: 18px;
        }
      }

      .card-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 80px;

        .data-value {
          font-size: 28px;
          font-weight: bold;
          color: #303133;
          margin-bottom: 5px;

          .unit {
            font-size: 14px;
            margin-left: 5px;
            font-weight: normal;
            color: #909399;
          }
        }

        .data-trend {
          font-size: 12px;
          color: #909399;
          display: flex;
          align-items: center;

          span {
            margin-right: 5px;
          }
        }
      }
    }
  }

  .charts-section {
    margin-bottom: 20px;

    .chart-card {
      height: 300px;

      .chart-placeholder {
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;

        .chart-info {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;

          .chart-data {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;

            .data-item {
              text-align: center;

              .data-label {
                font-size: 14px;
                color: #909399;
                margin-bottom: 5px;
              }

              .data-number {
                font-size: 24px;
                font-weight: bold;
                color: #303133;
              }
            }
          }

          .chart-image {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;

            .mock-chart {
              width: 100%;
              height: 150px;
              background: linear-gradient(to right, #e6f7ff, #bae7ff, #91d5ff, #69c0ff);
              border-radius: 4px;
              position: relative;
              overflow: hidden;

              &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 60%;
                background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.3" d="M0,224L60,213.3C120,203,240,181,360,181.3C480,181,600,203,720,197.3C840,192,960,160,1080,165.3C1200,171,1320,213,1380,234.7L1440,256L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>');
                background-size: cover;
                background-position: center;
              }
            }
          }
        }

        .sensor-data {
          width: 100%;
          padding: 10px;

          .sensor-item {
            margin-bottom: 20px;

            .sensor-name {
              font-size: 14px;
              margin-bottom: 5px;
              color: #606266;
            }
          }
        }
      }
    }
  }


}
</style>